import React, { PureComponent } from 'react';
// 引入框架
import { Input, message, Button, Collapse } from 'antd';
// 引入请求
import Axios from 'axios';
// 引入接口
import { webSite } from '../../website';
// 引入样式
import './kinghome.scss'
const { Panel } = Collapse;
const { TextArea } = Input;
export default class Kinghome extends PureComponent {
  constructor() {
    super()
    this.state = {
      // 显示
      isTrue: false,
      // 密码
      input: '',
      // 公告内容
      textArea: '',
      // 意见箱
      CollArr: []
    }
  }
  // input的输入事件
  handleInput = ({ target }) => {
    let { name, value } = target
    // 设置input和state同步
    this.setState({
      [name]: value
    })
  }
  componentDidMount () {
    const _this = this;
    if (sessionStorage.getItem('password')) {
      Axios.create({
        baseURL: `${webSite}:3003`
      }).post("/King", { password: sessionStorage.getItem('password') }).then(err => {
        if (err.data.code === 'K0001') {
          // 密码正确显示页面
          _this.setState({
            isTrue: true
          })
        } else {
          // 密码更改就返回密码界面
          _this.props.history.replace('/king');
        }
      }).catch(() => {
        // 没有网络连接就返回管理员页面
        this.props.history.replace('/king');
      })
    } else {
      // 没有密码就返回管理员页面
      this.props.history.replace('/king');
    }
  }
  // 更改密码的函数
  btnKing = () => {
    const _this = this;
    // 正则判断中文
    let isInt = /[\u4E00-\u9FA5]/g;
    // 判断是否有空格
    let input = this.state.input.replace(/\s+/g, "");
    if (input === '') {
      message.info({ content: '请输入新密码', className: 'bulletChatMessage' });
      return;
    }
    // 判断是否有中文
    if (isInt.test(input)) {
      message.info({ content: '设置的密码不能是中文', className: 'bulletChatMessage' });
      return;
    }
    // 向后台发送请求判断密码是否正确
    Axios.create({
      baseURL: `${webSite}:3003`
    }).post("/KingHome", { password: input }).then(err => {
      if (err.data.code === 'P0002') {
        message.success({ content: '密码重置成功', className: 'bulletChatMessage' });
        // 清空密码框
        _this.setState({
          input: ''
        })
        // 返回密码输入页面
        _this.props.history.replace('/king');
      }
    }).catch(() => {
      message.error({ content: '请检查您的网络连接', className: 'bulletChatMessage' });
    })
  }
  // 重新设置主页公告
  setFun = () => {
    const _this = this;
    let { textArea } = this.state;
    if (!textArea) {
      message.info({ content: '输入公告', className: 'bulletChatMessage' });
      return;
    }
    // 向服务器发送重置公告内容
    Axios.create({
      baseURL: `${webSite}:3003`
    }).post("/KingNotice", { Notice: textArea }).then(err => {
      if (err.data.code === 'N0001') {
        message.success({ content: '公告重置成功', className: 'bulletChatMessage' });
        // 清空密码框
        _this.setState({
          textArea: ''
        })
      }
    }).catch(() => {
      message.error({ content: '请检查您的网络连接', className: 'bulletChatMessage' });
    })
  }
  // 意见箱的请求
  btnColl = () => {
    let _this = this;
    Axios.create({
      baseURL: `${webSite}:3003`
    }).post("/KingColl").then(err => {
      if (err.data.code === 'C0001') {
        // 把服务器的意见显示在页面上
        _this.setState({
          CollArr: err.data.CollArr
        })
      }
    }).catch(() => {
      message.error({ content: '请检查您的网络连接', className: 'bulletChatMessage' });
    })
  }
  render () {
    let { isTrue, textArea, input, CollArr } = this.state;
    // 时间戳转成普通日期
    function getLocalTime (nS) {
      return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/, ' ');
    }
    return (
      <div className='kinghome'>
        {
          isTrue ?
            <div className='kinghome_body'>
              {/* 更改管理员密码 */}
              <div className='kinghome_body_mokuai'>
                <span>更改管理员密码</span>
                {/* 密码输入框 */}
                <Input placeholder="新管理员密码" className='kingHomeInput' value={input} name='input' onChange={this.handleInput} autoComplete="off" onPressEnter={this.btnKing} maxLength='20' />
              </div>
              {/* 更改公告栏 */}
              <div className='kinghome_body_mokuai' style={{ height: '28vh' }}>
                <span>更改公告栏</span>
                {/* 多行文本框 */}
                <TextArea rows={4} style={{ marginBottom: '5px', resize: 'none' }} placeholder='输入新公告' value={textArea} name='textArea' onChange={this.handleInput} maxLength='200' className='TextArea' />
                <Button onClick={this.setFun} className='kinghome_body_btn'>设置公告</Button>
              </div>
              {/* 网站建议 */}
              <div className='kinghome_body_mokuai' style={{ height: 'auto' }}>
                <span>网站建议箱</span>
                <Collapse onChange={this.btnColl} className='kinghome_Collapse'>
                  <Panel showArrow={false} header="意见箱" key="1" className='kinghome_Panel'>
                    {/* 意见内容 */}
                    <ul className='kinghome_Panel_ul'>
                      {
                        CollArr.length !== 0 ?
                          CollArr.reverse().map((list, index) => {
                            return (
                              <li key={index}>
                                <div className='kinghome_Panel_li_body'>
                                  <b>id：{list.id}</b>
                                  <b>qq：{list.qq}</b>
                                  <b>time：{getLocalTime(list.time)}</b>
                                </div>
                                <div className='kinghome_Panel_li_title'>{list.text}</div>
                              </li>
                            )
                          })
                          : ''
                      }
                    </ul>
                  </Panel>
                </Collapse>
              </div>
            </div>
            : ''
        }
      </div>
    )
  }
}